<template>
    <div>
      <el-row :gutter="20" style="padding:24px;border: 1px solid #ebebeb;border-radius: 3px;transition: .2s; margin: 30px 30px 0px 30px;">
        <el-col :span="6">
          <div>
            <el-statistic
            group-separator=","
            title="物料总数"
            :value='material_total_count'> 
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic
              group-separator=","
              :precision="0"
              :value="activity_total_count"
              title="活动总数"
            ></el-statistic>
          </div>
        </el-col> 
        <el-col :span="6">
          <div>
            <el-statistic
              group-separator=","
              :precision="0"
              decimal-separator="."
              :value="sale_total_count"
              title="销售总量"
            >
            <template slot="prefix">
                <span>
                  <i class="el-icon-star-on"  style="color:red"></i> 
                </span>
              </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic 
            :value="avg_sale_rate" 
            title="平均销售率">
              <template slot="prefix">
                <span> 
                  <i class="el-icon-lollipop" style="color:red"></i>
                </span>
              </template>
              <template slot="formatter">
               {{avg_sale_rate }} %
            </template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
      <el-container style="padding:24px;">
        <el-aside width="251px">
            <el-table
                :data="top_10_table" border style="width: 100%;">
                <el-table-column prop="material_name" label="销量TOP10" width="180"></el-table-column> 
                <el-table-column prop="sum_count" label="数量" width="70"></el-table-column>
            </el-table>
        </el-aside>
        <el-container> 
            <el-main>
                <div style="width:100%; height:400px;" class="grid-content bg-purple" id="nw_echart">
            
                </div>
            </el-main>
        </el-container>
        </el-container>
    </div>

 
  </template>

<script> 
import * as echarts from 'echarts';
export default {
  data() {
    return { 
      activity_total_count: 0,
      material_total_count:0,
      sale_total_count:0,
      avg_sale_rate:0.00,
      top_10_table:[]
    };
  },
   created() {   
     this.get_data();
    },
  methods:{ 
    get_data(){ 
        this.$get(this.$api+"/nw/get_statistics_data",{'start_time':'','end_time':''}).then(res=>{
            if(res.code== 0)
            { 
                this.activity_total_count = res.data.activity_total_count;
                this.material_total_count = res.data.material_total_count;
                this.sale_total_count = res.data.sale_total_count;
                this.avg_sale_rate = res.data.avg_sale_rate;
                this.top_10_table = res.data.top_ten_list; 
            }
            else{
                this.$notify({
                  title: '获取数据异常',
                  message: res.msg,
                  type: 'error'
                });
            }
        });
        this.$get(this.$api+'/nw/get_echart_data',{'start_time':'','end_time':'','show_count':12}).then(res=>{
            if(res.code== 0)
            {  
                this.start_init_echart(this.set_option(res.data));
            }
            else{
                this.$notify({
                  title: '获取数据异常',
                  message: res.msg,
                  type: 'error'
                });
            }
        });
    },
    start_init_echart(option){
        var myChart = echarts.init(document.getElementById('nw_echart'));
        myChart.setOption(option);
    },
    set_option(data){  
        const labelOption = {
            show: true,
            position: "insideBottom",
            distance: 15,
            align: "left",
            verticalAlign: "middle",
            rotate: 90,
            formatter: '{c}  {name|{a}}',
            fontSize: 16,
            rich: {
                name: {}
            }
        };
        var series = [];
        for(var i in data.series_list)
        {
            var json = {
                name: data.series_list[i].name,
                type: 'bar',
                barGap: 0,
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: data.series_list[i].data
            }
            series.push(json);
        } 
        return {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            legend: {
                data: data.legend_data
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar', 'stack'] },
                restore: { show: true },
                saveAsImage: { show: true }
                }
            },
            xAxis: [
                {
                type: 'category',
                axisTick: { show: false },
                data: data.xAxis_data
                }
            ],
            yAxis: [
                {
                type: 'value'
                }
            ],
            series: series
        };
    }
  }
};
</script>
 